import React, { useEffect, useState } from "react";
import api from "../../api/axios";
import { useNavigate, useParams } from "react-router-dom";
import { Button, message, List, Space, Modal } from "antd";
import logo from '../../img/logo.webp'
//适应高度的文本域
import { Input } from "antd";
const { TextArea } = Input;
function Index() {
  const navigate = useNavigate();
  const { id } = useParams();
  const [list, setlist] = useState([]);
  const [value, setValue] = useState("");
  const [value1, setValue1] = useState("");
  const getData = async () => {
    const res = await api.get(`/article/${id}`);
    console.log(res);
    setlist(res.data);
  };
  useEffect(() => {
    getData();
  }, []);
  const handsend = async () => {
    const token = localStorage.getItem("token");
    if (!token) {
      message.error("无token,请登录");
      navigate("/login");
    }
    if (value.length > 100) {
      message.error("内容不能超过100字");
      return;
    }
    if (!value.trim()) {
      message.error("内容不能为空");
      return;
    }
    const sensSit = value.replace(/傻逼|你妈|去死|蠢货|有病/g, "***");
    const res = await api.post("/discuss", {
      userId: 47529555, // 47529555 用户id
      content: sensSit, //评论内容
      //  commentId:number,//评论ID（非必填，回复评论时使用）
      articleId: Number(id), // 文章id 90
    });
    console.log(res);
    setValue("");
    getData();
    message.success("评论成功");
  };
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const handleOk = async () => {
    const res = await api.post("/discuss", {
      userId: 47529555, // 47529555 用户id
      content: value1, //评论内容
      //  commentId:number,//评论ID（非必填，回复评论时使用）
      articleId: Number(id), // 文章id 90
      commentId: open.commentId,
    });
    console.log(res);
    setValue1("");
    getData();
    message.success("回复成功");
    setOpen(false);
  };
  const handleCancel = () => {
    console.log("Clicked cancel button");
    setOpen(false);
  };
  return (
    <div>
      <div>
        <div>
          <h2>标题:{list.title}</h2>
          <br />
          <span>创建时间:{list.createdAt}</span>
          <br />
          <span>浏览量:{list.viewCount}</span>
          <br />
          <span>内容:{list.content}</span>
          <br />
        </div>
        {/* 文本域 */}
        <TextArea
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Controlled autosize"
          autoSize={{ minRows: 3, maxRows: 5 }}
        />
        <Button onClick={() => handsend()}>发送</Button>
        <br />
      </div>
      {/* 写评论内容 */}
      <div>
        <List
          dataSource={list.comments}
          renderItem={(item) => (
            <div>
              <Space align="start">
                <img src={logo} style={{ width: '50px', height: '50px', borderRadius: '50%' }} alt="" />
                <div>
                  <div>
                    {item.user.username}
                    <span>{item.user.createdAt}</span>
                  </div>
                  <span>{item.content}</span>
                  <br />
                  <Button onClick={() => setOpen({ username: item.user.username, commentId: item.id })}>回复</Button>
                  {/* 回复 */}
                  {
                    item.replies && item.replies.length > 0 && (
                      <List
                        dataSource={item.replies}
                        renderItem={(it) => (
                          <div>
                            <Space align="start">
                              <img src={logo} style={{ width: '50px', height: '50px', borderRadius: '50%' }} alt="" />
                              <div>
                                {it.user.username}
                                <span>{it.user.createdAt}</span>
                              </div>
                              <span>{it.content}</span>
                              <br />
                            </Space>
                          </div>
                        )}
                      />
                    )
                  }
                </div>
              </Space>
            </div>
          )}
        />
        {/* model */}
        <Modal
          title="Title"
          open={open}
          onOk={handleOk}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
        >
          <TextArea
            value={value1}
            onChange={(e) => setValue1(e.target.value)}
            placeholder="Controlled autosize"
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        </Modal>
      </div>
    </div>
  );
}

export default Index;
